import { getMyChannels, getAllChannels, updateMyChannels, delMyChannels } from '@/api/channel.js'
import {
  getMyChannels as getMyChannelsWithLocal,
  setMyChannels as setMyChannelsWithLocal
} from '@/utils/storage'

export default {
  namespaced: true,
  state: {
    allChannels: [], // 所有频道除用户已有的
    activeChannelId: 0, // 默认为推荐频道，id为0
    myChannels: [], // 存储用户频道列表
    isShowPopup: false// 默认弹层关闭
  },
  mutations: {
    // 获取所有频道
    setAllChannels (state, newAllchannels) {
      state.allChannels = newAllchannels
    },
    // 获取当前激活的频道 id
    setActiveChannelId (state, newActiveChannelId) {
      state.activeChannelId = newActiveChannelId
    },
    // 用户的频道列表
    setMyChannels (state, newMyChannels) {
      state.myChannels = newMyChannels
    },
    // 侧边弹层规则
    showPopup (state) {
      state.isShowPopup = true
    },
    hidePopup (state) {
      state.isShowPopup = false
    }
  },
  actions: {
    // 删除频道
    async delMyChannel (ctx, id) {
      // 如果登录了
      if (ctx.rootState.token) {
        // 发请求
        const [err, res] = await delMyChannels(id)
        // 成功，过滤出剩余的频道
        if (!err) {
          const newMyChannels = ctx.state.myChannels.filter(v => v.id !== id)
          // 更新state
          ctx.commit('setMyChannels', newMyChannels)
        }
        // 返回
        return [err, res]
        // 如果没登陆
      } else {
        // 直接过滤出剩余的频道
        const newMyChannels = ctx.myChannels.filter(v => v.id !== id)
        // 更新本地存储
        setMyChannelsWithLocal(newMyChannels)
        // 返回，补充说明：第二个参数可以不用给，对于外界而言，只需要知道是否删除成功即可
        return [null]
      }
    },
    // 添加新频道
    async addMyChannel (ctx, channel) {
      // 拼凑添加后的新数组
      const myChannels = [...ctx.state.myChannels, channel]
      // 给每个频道设置seq顺序序号：1 2 3 4 5 ....
      myChannels.forEach((v, i) => { v.seq = i + 1 })
      // 如果登录了
      if (ctx.rootState.token) {
        // 发请求
        const [err, res] = await updateMyChannels(myChannels)
        setMyChannelsWithLocal(myChannels)
        // 成功，同步Vuex状态
        if (!err) {
          ctx.commit('setMyChannels', myChannels)
        }
        // 返回，供外部使用
        return [err, res]
      // 如果没登录
      } else {
        // 同步Vuex状态
        ctx.commit('setMyChannels', myChannels)
        // 同步本地存储
        setMyChannelsWithLocal(myChannels)
        // 和之前一样，先拼凑出相同结构的res
        const res = { data: { data: { channels: myChannels } } }
        // 再返回供外部使用
        return [null, res]
      }
    },
    // 获取所有频道
    async loadAllChannels (ctx) {
      const [err, res] = await getAllChannels()
      console.log(res)
      if (!err) ctx.commit('setAllChannels', res.data.data.channels)
      return [err, res]
    },
    // 获取用户频道
    async loadMyChannels (ctx) {
      // 子模块的action中通过ctx.rootState获取根模块的状态
      if (ctx.rootState.token) {
        const [err, res] = await getMyChannels()
        if (!err) ctx.commit('setMyChannels', res.data.data.channels)
        return [err, res] // 返回出去供外界在调用此action时获取
      } else {
        // 获取本地的频道数据
        const myChannels = getMyChannelsWithLocal()
        // 如果有本地
        if (myChannels) {
          // 保存至 vuex
          ctx.commit('setMyChannels', myChannels)
          // 拼凑成 res
          const res = {
            data: {
              data: {
                channels: myChannels
              }
            }
          }
          return [null, res]
        } else {
          const [err, res] = await getMyChannels()
          // 如果没报错
          if (!err) {
            ctx.commit('setMyChannels', res.data.data.channels)
            setMyChannelsWithLocal(res.data.data.channels)
          }
          return [err, res]
        }
      }
    }
  },
  getters: {
    // 在getter中计算出可选频道列表
    optionalChannels (state) {
      // 从allChannels中过滤出不在myChannels中的
      return state.allChannels.filter(channel => {
        // some方法来检查state.myChannels数组中是否存在与当前频道id相同的频道。
        // 如果存在相同的频道id，则返回false，表示当前频道已经存在于
        // state.myChannels数组中，不属于可选频道列表；
        // 最后将过滤后的数组作为结果返回
        return !state.myChannels.some(myChannel => myChannel.id === channel.id)
      })
    }
  }
}
